import React, { FC, Fragment, ReactNode } from 'react'
import { Button, Card, Col, Icon, Result, Row, Steps } from 'antd'
import PageHeaderWrapper from '@/components/PageHeader'

const { Step } = Steps

const desc1: ReactNode = (
  <div
    style={{
      fontSize: 12,
      color: 'rgba(0, 0, 0, 0.45)',
      position: 'relative',
      left: 42
    }}
  >
    <div style={{ margin: '8px 0 4px' }}>
      曲丽丽<Icon style={{ marginLeft: 8 }} type='dingding-o'/>
    </div>
    <div>2016-12-12 12:32</div>
  </div>
)

const desc2: ReactNode = (
  <div style={{ fontSize: 12, position: 'relative', left: 42 }}>
    <div style={{ margin: '8px 0 4px' }}>
      周毛毛<Icon type='dingding-o' style={{ color: '#00A0E9', marginLeft: 8 }}/>
    </div>
    <div>
      <span className='link-button'>催一下</span>
    </div>
  </div>
)

const information: ReactNode = (
  <Fragment>
    <div
      style={{
        fontSize: 16,
        color: 'rgba(0, 0, 0, 0.85)',
        fontWeight: 500,
        marginBottom: 20
      }}
    >
      项目名称
    </div>
    <Row style={{ marginBottom: 16 }}>
      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>项目 ID：</span>
        23421
      </Col>
      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>负责人：</span>
        曲丽丽
      </Col>
      <Col xs={24} sm={24} md={24} lg={24} xl={12}>
        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>生效时间：</span>
        2016-12-12 ~ 2017-12-12
      </Col>
    </Row>
    <Steps
      style={{ marginLeft: -42, width: 'calc(100% + 84px)' }} progressDot current={1}>
      <Step
        title={<span style={{ fontSize: 14 }}>创建项目</span>}
        description={desc1}/>
      <Step title={<span style={{ fontSize: 14 }}>部门初审</span>} description={desc2}/>
      <Step title={<span style={{ fontSize: 14 }}>财务复核</span>}/>
      <Step title={<span style={{ fontSize: 14 }}>完成</span>}/>
    </Steps>
  </Fragment>
)

const extra: ReactNode = (
  <Fragment>
    <Button type='primary'>返回列表</Button>
    <Button>查看项目</Button>
    <Button>打 印</Button>
  </Fragment>
)

const Success: FC = () => (
  <PageHeaderWrapper title='失败页面'>
    <Card bordered={false}>
      <Result
        status='success'
        title='提交成功'
        subTitle='提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。本文字区域可以展示简单的补充说明，如果有类似展示“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。'
        extra={extra}
      >
        {information}
      </Result>
    </Card>
  </PageHeaderWrapper>
)

export default Success
